<!--
* @FileDescription: 我的订单
* @Author: chenz
* @Date: 2021/4/21
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
	<view class="my-orderform">
		<!-- 我的订单 -->
		<view class="main">
			<cl-scroller ref="scroller" @up="onUp" @down="onDown">
				<view class="list" v-for="(item,index) in dataList" :key="index">
					<view class="item" @click="goTo">
						<image class="collect" src="../../static/shoucang-nocheck.png" mode=""></image>
						<view class="list-cont">
							<view class="region">{{item.region}}</view>
							<view class="subject-date">{{item.item}}</view>
						</view>
						<view class="list-righ">
							<text style="float: right;">查看详情 >
								<!-- <cl-icon name="cl-icon-arrow-right"></cl-icon> -->
							</text>
						</view>
					</view>
				</view>

				<cl-loadmore v-if="list.length > 0" :loading="loading"></cl-loadmore>
			</cl-scroller>
		</view>
		<view class="fixed">
			<!-- <view class="fixed-item">推拿：</view>
			<view class="fixed-item">推拿：</view>
			<view class="fixed-item">推拿：</view>
			<view class="fixed-item">推拿：</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyOrderForm",
		data() {
			return {
				dataList: [{
						status: true,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					},
					{
						status: false,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					},
					{
						status: true,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					}, {
						status: true,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					}, {
						status: true,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					}, {
						status: true,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					}, {
						status: true,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					}, {
						status: true,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					}, {
						status: true,
						region: "历下店",
						item: "推拿按摩2020-1-25",
					},
				]
			}
		},
		methods: {
			// 跳转
			goTo() {
				console.log('跳转')
			},

			// 上拉加载
			onUp() {
				console.log('上拉加载')
			},

			// 下拉刷新
			onDown() {
				console.log('下拉刷新')
			}

		}
	}
</script>

<style lang="scss" scoped>
	.my-orderform {
		width: 100%;
		height: 100%;

		position: relative;

		// 列表
		.main {
			width: 100%;
			height: 1500rpx;
			z-index: 9998;
			padding: 20rpx;
			position: absolute;
			// background-color: pink;

			.list {


				.item {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					padding: 0 0 20rpx 50rpx;
					position: relative;
					border-bottom: $bor-btm;

					.collect {
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						top: 30%;
						left: 0;
					}

					.list-left {
						flex: 1;
					}

					.list-cont {
						flex: 1;

						.region {
							font-size: 32rpx;
							color: rgba(0, 0, 0, 0.76);
						}

						.subject-date {
							color: $text-color;
						}
					}

					.list-righ {
						flex: 1;
						float: right;
						color: $subject-bgc;
					}
				}

			}

		}



		// 固定定位
		.fixed {
			width: 100%;
			height: 440rpx;
			z-index: 9999;
			background-color: $subject-bgc;
			position: fixed;
			bottom: 0;
			border-radius: 3% 3% 0 0;
			display: flex;
			flex-wrap: wrap;

			.fixed-item {
				width: (calc(100% / 2));
				height: 50rpx;
				background-color: pink;
			}
		}
	}
</style>
